<template>
  <div class="customerlistX">
    <div class="top111">
      <img @click="fanhui" src="../assets/总图标包含整个系统的/fanhui.png" />
      <span>{{ title }}</span>
      <img
        class="aaaa"
        src="../assets/总图标包含整个系统的/fanhuishouye.png"
        @click="fanhuish"
      />
    </div>
    <div class="box_top">
      <div class="top_c">
        <p><img src="../assets/总图标包含整个系统的/红点.png" />客户姓名</p>
        <input type="text" v-model="custName" />
      </div>
      <div class="top_c">
        <p><img src="../assets/总图标包含整个系统的/红点.png" />联系方式</p>
        <input type="text" v-model="telephone" />
      </div>
    </div>
    <div class="box_top">
      <div class="top_c">
        <p>学历</p>
        <input type="text" v-model="education" />
      </div>
      <div class="top_c">
        <p>年龄</p>
        <input type="text" v-model="age" />
      </div>
      <div class="top_c">
        <p>性别</p>
        <input type="text" v-model="sex" />
      </div>
      <div class="top_c">
        <p>所属城市</p>
        <input type="text" v-model="cityName" />
      </div>
      <div class="top_c">
        <p>公司名称</p>
        <input type="text" v-model="company" />
      </div>
      <div class="top_c">
        <p>职务</p>
        <input type="text" v-model="position" />
      </div>
    </div>
    <div class="btn">
      <div class="box_btn" v-if="switchw" @click="clickfn">确认修改</div>
      <div class="box_btn" v-else @click="myclick">确认提交</div>
    </div>
  </div>
</template>
 
<script>
import { GetClickjiosList, GetLoginApiAddList } from "../request/aip";
export default {
  data() {
    return {
      custName: "",
      telephone: "",
      education: "",
      sex: "",
      age: "",
      cityName: "",
      company: "",
      position: "",
      id: "",
      // 显示哪个
      switchw: true,
      // 显示文本
      title: "编辑",
    };
  },
  created() {
    if (this.$route.query.custName) {
      (this.switchw = true), (this.title = "编辑");

      this.custName = this.$route.query.custName;
      this.telephone = this.$route.query.telephone;
      this.education = this.$route.query.education;
      this.sex = this.$route.query.sex;
      this.age = this.$route.query.age;
      this.cityName = this.$route.query.cityName;
      this.company = this.$route.query.company;
      this.position = this.$route.query.position;
      this.id = this.$route.query.id;
    } else {
      (this.switchw = false), (this.title = "新增客户信息");
    }
  },
  methods: {
    fanhui() {
      this.$router.push("/customer");
    },
    fanhuish() {
      this.$router.push("/index");
    },
    clickfn() {
      //   console.log(444444);
      GetClickjiosList({
        id: this.id,
        custName: this.custName,
        cityName: this.cityName,
        company: this.company,
        position: this.position,
        telephone: this.telephone,
        education: this.education,
        sex: this.sex,
        age: Number(this.age),
      }).then((res) => {
        console.log(res);
        this.$router.push("/customer");
      });
    },
    // 新增
    myclick() {
      console.log(111);
      GetLoginApiAddList({
        custName: this.custName,
        cityName: this.cityName,
        company: this.company,
        position: this.position,
        telephone: this.telephone,
        education: this.education,
        sex: this.sex,
        age: this.age,
      }).then((res) => {
        console.log(res);
        this.$router.go(-1);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.customerlistX {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
}
.top111 {
  background-color: #023293;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  padding: 10px;
  img {
    width: 10px;
  }
  .aaaa {
    width: 20px;
  }
}
.box_top {
  background-color: #fff;
  margin-top: 10px;
  padding: 10px 10px 0;
  .top_c {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;

    p {
      img {
        width: 5px;
        vertical-align: text-top;
      }
    }
    input {
      border: none;
      text-align: right;
      color: #999;
    }
  }
}
.btn {
  width: 100%;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 60px;
  padding: 10px 0;
  box-sizing: border-box;
  .box_btn {
    margin: auto;
    width: 90%;
    color: #fff;
    background-color: #003399;
    padding: 10px;
    text-align: center;
    border-radius: 50px;
  }
}
</style>